<script setup lang="ts">
import { ref } from "vue";
import { onLoad ,onReachBottom,onShow} from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/appStore";
import{apiGetUserMethod} from "../../apis/apis.js"
const appStore = useAppStore();
const iflog = ref(appStore.isLoggedIn);
const uid = ref(appStore.uid);
const noteList = ref([{id:1,title:"作物记录",image:"/static/record.png",operator:"张三",time:"2023-04-13"}])
noteList.value = [];
//获得时间格式化函数,将字符串2025-04-03T18:12:17.000Z转化为格式为2023-04-13 xx:xx:xx
const formatDate = (date:string) => {
  const newDate = new Date(date);
  const year = newDate.getFullYear();
  const month = newDate.getMonth() + 1;
  const day = newDate.getDate();
  const hours = newDate.getHours();
  const minutes = newDate.getMinutes();
  const seconds = newDate.getSeconds();
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const QueryParams = {
  page: 1, // 当前页码
  pageSize: 4, // 每页显示的数量
}
const countList = ref(0);

// const getMethod = async () => {
  
//   try {
//     const res = await apiGetUserMethod(QueryParams,uid.value)
//     console.log(res.data);
//     if (res.data.rows && res.data.rows.length > 0) {
//       let temp = res.data.rows.map((item:any) => ({id:item.id,title:item.title,image:item.images[0],operator:item.operator,time:formatDate(item.time)}));
//       noteList.value = [...noteList.value, ...temp];
//       countList.value = res.data.count;
//     }
  
//   } catch (error) {
//     console.error(error);
//   }
// }

interface NoteItem {
  id: number;
  title: string;
  images: string[];
  operator: string;
  time: string;
}

const getMethod = async () => {
  try {
    const res = await apiGetUserMethod(QueryParams, uid.value);
    console.log(res.data);
    
    if (res.data.rows?.length) {
      // 如果是第一页就覆盖，否则追加,如果是最后一页就不追加
      const temp = res.data.rows.map((item: NoteItem) => ({
        id: item.id,
        title: item.title,
        image: item.images[0],
        operator: item.operator,
        time: formatDate(item.time),
      }));
      if (QueryParams.page === 1) {
        noteList.value = temp; 
      }
      else {
        noteList.value = [...noteList.value, ...temp]; // 追加新数据 
      }
      if (QueryParams.page * QueryParams.pageSize >= res.data.count) {
        noteList.value = noteList.value.slice(0, res.data.count); // 截取到 count 的长度 
      }
      countList.value = res.data.count;
      console.log(noteList.value);
    }
   
    
  } catch (error) {
    console.error(error);
  }
}


//页面跳转
const goToPage = (src:string,id:number) => {

  console.log(`/pages/`+src+`?id=${id}`);
  uni.navigateTo({
    url: `/pages/`+src+`?id=${id}`, 
  })
  
}

onLoad(() => {
  
})
onShow(() => {
  getMethod() 
})
onReachBottom(async () => {
  // 检查是否还有更多数据可以加载
  if (countList.value && countList.value <= QueryParams.page * QueryParams.pageSize) {
    uni.showToast({ title: '没有更多数据了', icon: 'none' });
    return;
  }

  // 增加页码，准备加载下一页数据
  QueryParams.page++;

  // 调用 getMethod 加载数据
  await getMethod();
});


</script>

<template>
  <div class="note-container">
    <div class="note-grid">
      <div v-for="item in noteList" :key="item.id" class="note-card" @click="goToPage(`Records/detail`,item.id)">
        <div class="card-image">
          <image :src="item.image" :alt="item.title" mode="aspectFill"></image>
        </div>
        <div class="card-content">
          <h3 class="title">{{ item.title }}</h3>
          <div class="info">
            <text class="operator">操作人：{{ item.operator }}</text>
            <text class="time">{{ item.time }}</text>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.note-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.note-card {
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

  .card-image {
    height: 250rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .card-content {
    padding: 24rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
    }

    .info {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      font-size: 24rpx;

      .operator {
        color: #2c8a3d;
      }

      .time {
        color: #999;
      }
    }
  }
}
</style>
